<template>
  <div id="user" style="width: 100%; overflow:hidden;">
    </pub-header>
    <div v-if="loading">
      <div class="userinfo flex">
        <div class="headpic"><img :src="userData.face? userData.face: '../../static/img/noheadpic.png'" />
          <i class="icon " :class="'icon-v' + userData.level"></i>
        </div>
        <div class="info">
          <div class="flex flex-middle" style="height: 0.42rem;overflow:hidden;">
            <b style="font-size: 0.34rem">{{ userData.nick_name || '未设置昵称' }}</b>
            <router-link to="/user/setNickName" style="color: white;">
              <i class="icon icon-edit" style="font-size: 0.5rem; margin-left: 0.15rem;"></i>
            </router-link>
            <div v-if="userData.verify_company != 1 && userData.verify_card == 1" style="background: #ff9800;margin-left: 0.15rem; width: 0.45rem; text-align: center;">
              <i class="icon icon-gerenrenzheng"></i>
            </div>
            <div v-if="userData.verify_company == 1" style="background: #ff9800;margin-left: 0.15rem; width: 0.45rem; text-align: center;">
              <i  class="icon icon-qiye" style="font-size: 0.3rem"></i>
            </div>
          </div>
          <p style="line-height: 0.9rem; font-size: 0.32rem;"><b>{{ userData.phone }}</b></p>
        </div>
      </div>
      <div class="userlevel">
        <div>
          <p class="title vux-1px-r"><b>VIP{{ userData.level }}</b></p>
          <p>等级</p>
        </div>
        <div>
          <p class="title vux-1px-r"><b>{{ userData.order_qiang }}</b></p>
          <p>成交量</p>
        </div>
        <div @click="toCredits">
          <p class="title"><b>{{ userData.credits }}</b></p>
          <p>信用值</p>
        </div>
      </div>
      <div class="reginfo">
        <div class="title"><b>注册</b></div>
        <div><i class="icon icon-shijian"></i><span>注册时间: {{ userData.time }}</span></div>
        <div class="overflowtext"><i class="icon icon-house"></i><span>注册城市: {{ userData.province }}{{ userData.city }}{{ userData.area }}</span></div>
      </div>
      <div class="reginfo">
        <div class="title"><b>相关</b></div>
        <div><i class="icon icon-xingxing3"></i><span>主营业务: {{ userData.service }}</span></div>
        <div class="overflowtext"><i class="icon icon-map-menu"></i><span>企业地址: {{ userData.province }}{{ userData.city }}{{ userData.area }}</span></div>
      </div>
      <div class="reginfo" v-if="serverID == '8'">
        <div class="title"><b>优势线路</b></div>
        <div style="height: auto;"><p v-for="item in userData.line">{{ item.line }}</p></div>
      </div>
      <div class="reginfo" v-if="serverID == '6' || serverID == '7'">
        <div class="title"><b>优势服务</b></div>
        <div><i class="icon icon-zhongguoditu"></i><span>{{ userData.service_you }}</span></div>
      </div>
      <div class="reginfo">
        <p class="title flex flex-space-between flex-middle"><b>认证</b></p>
        <div v-if="userData.verify_company != 1">
          <div class="flex flex-middle" @click="toAudit">
            <i class="icon icon-renzhengyonghu"></i>
            <span>个人认证</span>
            <span class="successinfo" v-if="userData.verify_card == 1">已认证</span>
            <span class="errorinfo" v-else-if="userData.verify_card == 2">未认证</span>
            <span class="errorinfo" v-else-if="userData.verify_card == 3">审核中</span>
            <span class="errorinfo" v-else-if="userData.verify_card == 4">被拒绝</span>
            <span class="errorinfo" v-else-if="userData.verify_card == 5">被撤销</span>
          </div>
        </div>
        <div>
          <div class="flex flex-middle" @click="toAudit2">
            <i class="icon icon-qiye" style="font-size: 0.3rem"></i>
            <span>企业认证</span>
            <span class="successinfo" v-if="userData.verify_company == 1">已认证</span>
            <span class="errorinfo" v-else-if="userData.verify_company == 2">未认证</span>
            <span class="errorinfo" v-else-if="userData.verify_company == 3">审核中</span>
            <span class="errorinfo" v-else-if="userData.verify_company == 4">被拒绝</span>
            <span class="errorinfo" v-else-if="userData.verify_company == 5">被撤销</span>
          </div>
        </div>

      </div>
      <div class="evaluate text-center">
        <div class="title"><b>我的评价</b></div>
        <div>
          <rater disabled  v-model="userData.comment_score" active-color="#ff9800"></rater> <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{userData.comment_score}}<span style="font-size: 0.24rem;">分</span></span>
        </div>
        <ul class="flex tag">
          <li v-for="item in userData.tag">
            {{ item.chat }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Rater } from 'vux'
import { isWechat, getWechatConfig } from '../libs/fn'
export default{
  components: {
    PubHeader,
    Rater
  },
  created() {
    if(isWechat()) {
      const { path } = this.$route
      getWechatConfig(path, this.$store.state.userInfo.uid, this.$store.state.userInfo.token)
    }
    this.$wechat.ready(() => {
      this.$wechat.onMenuShareAppMessage(this.wechatShareConfig)
      this.$wechat.onMenuShareTimeline(this.wechatShareConfig)
      this.$wechat.onMenuShareWeibo(this.wechatShareConfig)
      this.$wechat.onMenuShareQZone(this.wechatShareConfig)
    })
    this.$http.post($config.host + '/api/Userinfo/userPage', qs.stringify({
      id: this.$store.state.userInfo.uid,
      uid: this.$store.state.userInfo.uid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token
    })).then((res) => {
      const { code, msg, data } = res.data
      if(code == '1' && data) {
        this.userData = data
        const isHttps = this.userData.face.substring(0, 7)
        if(isHttps == 'http://'){
          this.userData.face = this.userData.face.replace(/http:\/\//, "https://")
        }
        this.loading = true
        let userInfo = this.$store.state.userInfo
        userInfo.verify_company = data.verify_company
        userInfo.verify_card = data.verify_card
        userInfo.nick_name = data.nick_name
        userInfo.face = data.face
        this.$store.commit('setUserInfo', userInfo)
        window.localStorage.user = JSON.stringify(userInfo)
      } else if (code == '3') {
        this.$vux.toast.text($config.loginErrMsg, 'middle')
        this.$router.push({path: '/logout'})
      } else {
        this.$vux.toast.text(msg, 'middle')
      }
    }).catch((err) => {
      this.$vux.toast.text($config.errMsg, 'middle')
    })
  },
  computed: {
    serverID() {
      return this.$store.state.userInfo.service_id || 0
    }
  },
  data(){
    return {
      wechatShareConfig: {
        title: '正在使用途鸟配送发货，邀您体验！',
        desc: '我正在使用途鸟配送发货，这里送货服务好，发货响应快，同城城际都能用！快来体验！',
        link: $config.wechatHost + '/?#',
        imgUrl: $config.wechatHost + '/static/img/applogo.png'
      },
      userData: [],
      loading: false
    }
  },
  methods: {
    toAudit() {
      if(this.userData.verify_card == 3){
        this.$router.push({path: '/user/inAudit'})
      } else if (this.userData.verify_card == 1){
        this.$router.push({path: '/user/auditSuccess', query:{verify_card: 1}})
      } else {
        this.$router.push({path: '/user/personallyIdentifying'})
      }
    },
    toAudit2() {
      if(this.userData.verify_company == 3){
        this.$router.push({path: '/user/inAudit'})
      } else if (this.userData.verify_company == 1){
        this.$router.push({path: '/user/auditSuccess', query:{verify_company: 1}})
      } else {
        this.$router.push({path: '/user/companyIdentifying'})
      }
    },
    toCredits() {
      this.$router.push({path: '/user/credits'})
    }
  }
}
</script>
<style scoped>
.userinfo{
  height: 2.8rem;
  margin-top: 0.15rem;
  background: url("../../static/img/user-bg.png") no-repeat center;
  background-size: 100% 100%;
  padding: 0.45rem 0.25rem;
}
.headpic{
  height: 1.45rem;
  width: 1.45rem;
  margin: 0rem 0.15rem;
  position: relative;
}
.headpic .icon{
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  color: #fff;
  bottom: 0.03rem;
  right: -.1rem;
  line-height: 0.5rem;
  display: block;
  text-align: center;
  background: #ffc800;
  border-radius: 50%;
  font-size: 0.26rem;
}
.headpic .icon:after{
  content: '';
  border-radius: 50%;
  position: absolute;
  top: 0.04rem;
  left: 0.04rem;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid #fff;
}
.headpic img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.userinfo .info{
  height: 1.45rem;
  padding: 0.2rem 0.3rem;
  color: #fff;
}
.reginfo,.userlevel, .evaluate{
  background: #fff;
  border-radius: 0.1rem;
  box-shadow: 0rem 1px 0.07rem rgba(0,0,0,0.1);
}
.evaluate .tag{
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.evaluate .tag li{
  padding: 0.06rem 0.1rem;
  overflow: hidden;
  border:1px #e5e5e5 solid;
  margin-bottom: 0.15rem;
  border-radius: 0.06rem;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.userlevel{
  height: 2rem;
  display: flex;
  padding: 0.5rem 0rem;
  margin: -0.6rem 0.25rem 0.1rem 0.25rem;
}
.reginfo{
  padding: 0.25rem 0.25rem 0.25rem 0.8rem;
  margin: 0.2rem 0.25rem 0.1rem;
  color: #6d6d6d;
}
.evaluate{
  padding: 0.25rem;
  margin: 0.2rem 0.25rem 0.1rem;
  color: #6d6d6d;
  position: relative;
}
.evaluate .title{
  text-align: center;
  position: relative;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.3rem;
}
.evaluate .title b{
  background: #fff;
  width: 2rem;
  position: absolute;
  left:50%;
  margin-left: -1rem;
  display: inline-block;
  z-index: 2;
}
.evaluate .title:after{
  content: '';
  position: absolute;
  z-index:0;
  left:0;
  right: 0;
  height: 1px;
  top: 0.29rem;
  background: #e5e5e5;
}
.reginfo div{
  min-height: 0.65rem;
  line-height: 0.65rem;
}
.reginfo .title{
  font-size: 0.36rem;
  height: 0.6rem;
  color: #222;
  margin-bottom: 0.15rem;
}
.reginfo .icon{
  display: inline-block;
  width: 0.6rem;
}
.userlevel>div{
  flex: 1;
  text-align: center;
}
.userlevel .title{
  height: 0.65rem;
  color: #222;
  font-size: 0.32rem;
}
.successinfo, .errorinfo{
  border: 1px solid #1c9d17;
  color: #1c9d17;
  display: inline-block;
  padding: 0rem 0.12rem;
  height: 0.42rem;
  border-radius: 0.06rem;
  line-height: 0.4rem;
  font-size: 0.26rem;
  margin-left: 0.12rem;
}
.errorinfo{
  border: 1px solid #ff5722;
  color: #ff5722;
}
</style>
